﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Slider, Slider Widget, RangeSlider" />
    <meta name="description" content="jqxSlider enables you to capture a range of values with two drag handles. You can enable this mode by setting the rangeSlider property to true." />
    <title id='Description'>jqxSlider enables you to capture a range of values with two drag handles. You can enable this mode by setting the rangeSlider property to true.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript">
        var shop = (function ($) {
            var laptops = {
                'l-1': { ram: 2, price: 510, display: 15.6, hdd: 320, model: 'Toshiba Satellite C660', marked: false },
                'l-2': { ram: 6, price: 594, display: 15.6, hdd: 500, model: 'TOSHIBA Satellite L675', marked: false },
                'l-3': { ram: 4, price: 918, display: 14.5, hdd: 500, model: 'HP Envy 14-1190', marked: false },
                'l-4': { ram: 4, price: 1165, display: 15.6, hdd: 500, model: 'Dell Vostro 3500', marked: false },
                'l-5': { ram: 12, price: 1306, display: 15.6, hdd: 750, model: 'ASUS N73JQ-A2', marked: false },
                'l-6': { ram: 8, price: 3732, display: 17, hdd: 1280, model: 'Alienware M17X', marked: false },
                'l-7': { ram: 4, price: 800, display: 17, hdd: 500, model: 'Toshiba Satellite P300-21E', marked: false },
                'l-8': { ram: 12, price: 3595, display: 18.4, hdd: 1024, model: 'ASUS NX90JQ', visible: false },
                'l-9': { ram: 2, price: 631, display: 14.1, hdd: 500, model: 'Packard Bell EasyNote', marked: false },
                'l-10': { ram: 2, price: 550, display: 13.3, hdd: 320, model: 'Lenovo ThinkPad Edge', marked: false },
                'l-11': { ram: 3, price: 529, display: 15.6, hdd: 320, model: 'Fujitsu Lifebook A531', marked: false },
                'l-12': { ram: 8, price: 2401, display: 16.5, hdd: 500, model: 'SONY VAIO F', marked: false }
            };

            var drawTable = function () {
                var catalogue = '<table class="demo-laptop-catalog-table"><tr>', counter = 0;
                for (var laptop in laptops) {
                    if (laptops.hasOwnProperty(laptop)) {
                        counter += 1;
                        if (counter % 3 === 1 && counter !== 1) {
                            catalogue += '</tr><tr>';
                        }
                        catalogue += '<td class="demo-laptop-cell jqx-rc-all" id="' + laptop + '">' +
                                        '<div class="demo-laptop-cell-header"><div class="demo-laptop-cell-header-content">' + laptops[laptop].model + '</div></div>' +
                                        '<div class="demo-laptop-cell-content"><img src="../../images/' + laptop + '.jpg" alt="' + laptops[laptop].model + '" title="' + laptops[laptop].model + '" /></div>' +
                                        '<div class="demo-laptop-cell-price jqx-rc-all">$ ' + laptops[laptop].price + '</div>' +
                                     '</td>';
                    }
                }
                catalogue += '</tr></table>';
                $('#catalogue')[0].innerHTML = catalogue;
            };

            var addEventListeners = function () {
                $('.jqx-slider').bind('change', function (event) {
                    var filter = $(this).attr('filter');
                    handleSlide(filter, event.args.value);
                });

                $('#resetButton').bind('click', function () {
                    resetFilters();
                });
            };

            var resetFilters = function () {
                this.priceSlider.jqxSlider('setValue', [this.priceSlider.jqxSlider('min'), this.priceSlider.jqxSlider('max')]);
                this.displaySlider.jqxSlider('setValue', [this.displaySlider.jqxSlider('min'), this.displaySlider.jqxSlider('max')]);
                this.hddSlider.jqxSlider('setValue', [this.hddSlider.jqxSlider('min'), this.hddSlider.jqxSlider('max')]);
                this.ramSlider.jqxSlider('setValue', [this.ramSlider.jqxSlider('min'), this.ramSlider.jqxSlider('max')]);
            };

            var handleSlide = function (option, value) {
                filterItems(updateFilter(option, value));
                setLabelValue(this[option + 'Slider'], option, value);
            };

            var setLabelValue = function (slider, option, value) {
                var label;
                switch (option) {
                    case 'price':
                        label = 'USD';
                        break;
                    case 'hdd':
                        label = 'GB';
                        break;
                    case 'display':
                        label = 'inches';
                        break;
                    case 'ram':
                        label = 'GB';
                        break;
                }
                document.getElementById(option + 'Max').innerHTML = value.rangeEnd + ' ' + label;
                document.getElementById(option + 'Min').innerHTML = value.rangeStart + ' ' + label;
            };

            var filterItems = function (filter) {
                var failed = false;
                for (var laptop in laptops) {
                    for (var property in filter) {
                        if (filter[property].max < laptops[laptop][property] || filter[property].min > laptops[laptop][property]) {
                            failed = true;
                        }
                    }
                    if (failed) {
                        if (!laptops[laptop].marked) {
                            markItem(laptop);
                        }
                    } else {
                        if (laptops[laptop].marked) {
                            unmarkItem(laptop);
                        }
                    }
                    failed = false;
                }
            };

            var resetItemFilter = function (laptop) {
                var laptopCells = $('.demo-laptop-cell');
                for (var i = 0; i < laptopCells.length; i += 1) {
                    laptopCells[i].css('opacity', 1);
                }
            };

            var unmarkItem = function (laptop) {
                var domLaptop = $('#' + laptop);
                domLaptop.css('opacity', 1);
                laptops[laptop].marked = false;
            };

            var markItem = function (laptop) {
                var domLaptop = $('#' + laptop);
                domLaptop.css('opacity', 0.5);
                laptops[laptop].marked = true;
            };

            var initSliders = function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) {
                this.priceSlider = priceSlider;
                this.displaySlider = displaySlider;
                this.ramSlider = ramSlider;
                this.hddSlider = hddSlider;
                this.resetButton = resetButton;
                buildFilter();
            };

            var buildFilter = function () {
                var priceValue = this.priceSlider.jqxSlider('value'),
                    displayValue = this.displaySlider.jqxSlider('value'),
                    ramValue = this.ramSlider.jqxSlider('value'),
                    hddValue = this.hddSlider.jqxSlider('value');
                this.filter = {
                    price: {
                        max: priceValue.rangeEnd,
                        min: priceValue.rangeStart
                    },
                    display: {
                        max: displayValue.rangeEnd,
                        min: displayValue.rangeStart
                    },
                    hdd: {
                        max: hddValue.rangeEnd,
                        min: hddValue.rangeStart
                    },
                    ram: {
                        max: ramValue.rangeEnd,
                        min: ramValue.rangeStart
                    }
                };
            };

            var updateFilter = function (option, value) {
                this.filter[option].min = value.rangeStart;
                this.filter[option].max = value.rangeEnd;
                return this.filter;
            };

            return {
                init: function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) {
                    drawTable();
                    initSliders(priceSlider, displaySlider, ramSlider, hddSlider, resetButton);
                    addEventListeners();
                    setLabelValue(priceSlider, 'price', priceSlider.jqxSlider('value'));
                    setLabelValue(displaySlider, 'display', displaySlider.jqxSlider('value'));
                    setLabelValue(ramSlider, 'ram', ramSlider.jqxSlider('value'));
                    setLabelValue(hddSlider, 'hdd', hddSlider.jqxSlider('value'));
                }
            };
        } ($));

        $(document).ready(function () {
            $('#catalogue').css('visibility', 'hidden');

            var theme = '';
  
            var priceslider = $('#priceSlider'),
                displaySlider = $('#displaySlider'),
                ramSlider = $('#ramSlider'),
                hddSlider = $('#hddSlider'),
                resetButton = $('#resetButton');

            priceslider.jqxSlider({ showButtons: true, theme: theme, height: 30, min: 500, max: 4000, step: 350, ticksFrequency: 350, mode: 'fixed', values: [500, 4000], rangeSlider: true, width: 190 });
            displaySlider.jqxSlider({ theme: theme, height: 30, min: 9, max: 19, step: 1, ticksFrequency: 1, values: [9, 19], rangeSlider: true, mode: 'fixed', width: 190 });
            ramSlider.jqxSlider({ theme: theme, height: 30, min: 2, max: 12, step: 1, ticksFrequency: 1, values: [2, 12], rangeSlider: true, mode: 'fixed', width: 190 });
            hddSlider.jqxSlider({ theme: theme, height: 30, min: 150, max: 1500, values: [150, 1500], step: 135, ticksFrequency: 135, rangeSlider: true, mode: 'fixed', width: 190 });
            resetButton.jqxButton({ theme: theme, width: 100 });

            shop.init(priceslider, displaySlider, ramSlider, hddSlider, resetButton);
            $('#catalogue').css('visibility', 'visible');
        });
    </script>
<style type="text/css">
.demo-laptop-catalog-table
{
    table-layout: fixed;
    border-collapse: separate;
}
.demo-laptop-cell
{
    border: 1px solid #ccc;
}
.demo-laptop-cell-header-content
{
    top: 5px;
    position: relative;
}
.demo-laptop-cell-header
{
    border: 0px solid #ccc;
    border-bottom-width: 1px;
    height: 20px;
    font-size: 10px;
    text-align: center;
    font-weight:bold;
    vertical-align: middle;
    background: #e3e3e3;
}
.demo-laptop-cell-content
{
    padding-top: 5px;
}
.demo-laptop-cell-price
{
    padding: 2px 3px 2px 3px;
    color: #fff;
    float: right;
    background: #000;
    font-weight: bold;
}
.catalogue
{
    border: 1px solid #bbb;
    padding: 3px;
    background: #fff;
}
.options
{
    width: 211px;
    margin-left: 5px;
    float: left;
}     
.main-container
{
    padding: 2px;
}
.label
{
    font-size: 13px;
    font-family: Arial;
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 15px;
    width: 100%;
    text-align: left;
}
.options-value
{
    font-size: 11px;
}
.options-container
{
    padding: 10px;
    text-align: center;
}
.resetButton
{
    margin-top: 35px;
}
</style>
</head>
<body class='default'>
    <div id="jqxWidget">
        <div id="main-container" class="main-container jqx-rc-all">
            <div style="float: left">
                <div id="catalogue" class="catalogue jqx-rc-all">
                </div>
            </div>
            <div id="options" class="options jqx-rc-all">
                <div id="options-container" class="options-container">
                    <div class="label">
                        Price</div>
                    <div class="options-value">
                        <div style="float: left" id="priceMin">
                        </div>
                        <div style="float: right" id="priceMax">
                        </div>
                    </div>
                    <br />
                    <div filter="price" id='priceSlider'>
                    </div>
                    <div class="label">
                        Screen Size</div>
                    <div class="options-value">
                        <div style="float: left" id="displayMin">
                        </div>
                        <div style="float: right" id="displayMax">
                        </div>
                    </div>
                    <br />
                    <div filter="display" id='displaySlider'>
                    </div>
                    <div class="label">
                        RAM</div>
                    <div class="options-value">
                        <div style="float: left" id="ramMin">
                        </div>
                        <div style="float: right" id="ramMax">
                        </div>
                    </div>
                    <br />
                    <div filter="ram" id='ramSlider'>
                    </div>
                    <div class="label">
                        HDD</div>
                    <div class="options-value">
                        <div style="float: left" id="hddMin">
                        </div>
                        <div style="float: right" id="hddMax">
                        </div>
                    </div>
                    <br />
                    <div filter="hdd" id='hddSlider'>
                    </div>
                    <input type="button" value="Reset filters" id="resetButton" class="resetButton" />
                </div>
            </div>
            <div style="clear: both;">
            </div>
        </div>
    </div>
</body>
</html>